<template>
  <div class="wrapper">
    <div class="mianbu-wrap">

      <div class="top"></div>
      <div class="top-bot">
        <img @click="gofenlei" src="../../assets/img/shouye/header-xinpin/back.png"/>
        <span>面部护理</span>
      </div>
      <div class="xuanxiang">
        <ul>
          <li><a >销量</a></li>
          <li><a >最新</a></li>
          <li><a >价格</a></li>
          <li><a @click="goshuaixuan">筛选</a></li>
        </ul>
      </div>

      <div class="qingkong">
        <div></div>
      </div>

      <div class="mianbuhuli">
        <div class="le middle">
          <img src="../../assets/img/fenlei/kouhong.jpg" />
        </div>
        <div class="ri">
          <span>焕彩萃璨花蕊唇彩4.8g</span>
          <p>焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</p>
          <div>
            <img src="../../assets/img/fenlei/japan.jpg" alt="" />
            <img src="../../assets/img/fenlei/feiji.jpg" alt="" class="plain" />
            <span>海外直邮</span>
            <p>¥166</p>
          </div>
        </div>
      </div>
      <div class="mianbuhuli">
        <div class="le middle">
          <img src="../../assets/img/fenlei/kouhong.jpg" />
        </div>
        <div class="ri">
          <span>焕彩萃璨花蕊唇彩4.8g</span>
          <p>焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</p>
          <div>
            <img src="../../assets/img/fenlei/japan.jpg" alt="" />
            <img src="../../assets/img/fenlei/feiji.jpg" alt="" class="plain" />
            <span>海外直邮</span>
            <p>¥166</p>
          </div>
        </div>
      </div>
      <div class="mianbuhuli">
        <div class="le middle">
          <img src="../../assets/img/fenlei/kouhong.jpg" />
        </div>
        <div class="ri">
          <span>焕彩萃璨花蕊唇彩4.8g</span>
          <p>焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</p>
          <div>
            <img src="../../assets/img/fenlei/japan.jpg" alt="" />
            <img src="../../assets/img/fenlei/feiji.jpg" alt="" class="plain" />
            <span>海外直邮</span>
            <p>¥166</p>
          </div>
        </div>
      </div>
      <div class="mianbuhuli">
        <div class="le middle">
          <img src="../../assets/img/fenlei/kouhong.jpg" />
        </div>
        <div class="ri">
          <span>焕彩萃璨花蕊唇彩4.8g</span>
          <p>焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</p>
          <div>
            <img src="../../assets/img/fenlei/japan.jpg" alt="" />
            <img src="../../assets/img/fenlei/feiji.jpg" alt="" class="plain" />
            <span>海外直邮</span>
            <p>¥166</p>
          </div>
        </div>
      </div>

      <div class="bot">
        <img src="../../assets/img/fenlei/datu.jpg" alt="">
        <a>加载更多</a>
      </div>
    </div>
    <div class="toubu"></div>
    <div class="shuaixuan">

    <div class="fahuo">
      <div class="fahuo-head">
        <img src="../../assets/img/fenlei/fahuodi.jpg" alt="">
          <span>发货地</span>
      </div>
      <div class="name">
        <div><span>日本</span></div>
        <div><span>美国</span></div>
        <div><span>中国</span></div>
        <div><span>澳大利亚</span></div>
        <div><span>英国</span></div>
      </div>
    </div>

    <div class="fahuo">
        <div class="fahuo-head">
          <img src="../../assets/img/fenlei/shangpinleixing.jpg" alt="">
          <span>商品类型</span>
        </div>
        <div class="name">
          <div  @click="doclick"><span>促销商品</span></div>
          <div><span>首发商品</span></div>
        </div>
      </div>

    <div class="fahuo fahuo-fenlei">
        <div class="fahuo-head">
          <img src="../../assets/img/fenlei/fenlei1.jpg" alt="">
          <span>分类</span>
        </div>
        <div class="name">
          <!--1-->
          <div><span>洁面护理</span></div>
          <div><span>人气口红</span></div>
          <div><span>名牌包包</span></div>
          <!--2-->
          <div><span>洁面护理</span></div>
          <div><span>人气口红</span></div>
          <div><span>名牌包包</span></div>
          <!--3-->
          <div><span>洁面护理</span></div>
          <div><span>人气口红</span></div>
          <div><span>名牌包包</span></div>
          <!--4-->
          <div><span>洁面护理</span></div>
          <div><span>人气口红</span></div>
          <div><span>名牌包包</span></div>
          <!--5-->
          <div><span>洁面护理</span></div>
          <div><span>人气口红</span></div>
          <div><span>名牌包包</span></div>
          <!--6-->
          <div><span>洁面护理</span></div>
          <div><span>人气口红</span></div>
          <div @click="goGengduo" id="gengduo"><a>更多分类></a></div>

        </div>
      </div>
    <div class="btn">
        <button><a>重置</a></button>
        <button @click="goqingkong"><a>确定</a></button>
      </div>
    </div>
  </div>
</template>
<script>
  import mianbuhuli from './facialcare.vue'
  export default {
    data() {
      return {
        bol: true
      }
    },
    methods:{
      doclick(){

      },
      goGengduo(){
        this.$router.push({path:'/gengduo'})
      },
      goshuaixuan(){
        this.$router.push({path:'/shuaixuan'})
      },
      gofenlei(){
        this.$router.push({path:'/FenLei'})
      },
      goqingkong(){
        this.$router.push({path:'/qingkong'})
      }
    },
    components:{
      mianbuhuli
    }
  }
</script>
<style scoped>
  .name>div:hover,.name>div:visited{
    background:url("../../assets/img/fenlei/duihao1.png") no-repeat;
    background-color: #f2f2f2;
  }
  .toubu{
    width: 100%;
    height: 30rem;
    background:rgba(0,0,0,0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .shuaixuan{
    width: 80%;
    margin-left: 20%;
    background-color:#ffffff;
    position: fixed;
    bottom: 0;
    right: 0;
  }
  .shuaixuan p{
    margin-left: 2rem;
    /*display: none;*/
  }
  .fahuo{
    border-bottom: 1px solid #cccccc;
  }
  .fahuo .fahuo-head{
    padding: 0.4rem;
  }
  .fahuo .fahuo-head span{
    font-size: 0.7rem;
  }
  .fahuo .fahuo-head img{
    width: 0.8rem;
  }
  .name div{
    width: 3.2rem;
    background: #f2f2f2;
    text-align: center;
    display: inline-block;
    padding: 0.1rem;
    margin: 0.2rem;
    border-radius: 0.2rem;
  }
  .name span{
    font-size: 0.7rem;

  }
  .fahuo-fenlei{
    border-bottom: 0px;
  }
  #gengduo{
    font-size: 0.6rem;
    background: none;
  }
  .btn{
    width: 100%;
    margin-top: 0.8rem;
    text-align: center;
  }
  .btn button{
    width: 40%;
    height: 2rem;
    background: #f2f2f2;
    display: inline-block;
    outline:none;
  }
  .btn button:hover{
    background: red;
  }
</style>
<style scoped>
  body,html{
    background: #f3f3f3;
  }
  .top{
    width: 100%;
    height: 1rem;
    background: red;
  }
  .top-bot{
    position: relative;
    width: 100%;
    height: 2rem;
    background: red;
  }
  .top-bot img{
    height: 50%;
    margin: 0.5rem;
  }
  .top-bot span{
    position: absolute;
    top: 25%;
    left: 40%;
    font-size: 0.8rem;
    color: #fff;
    text-align: center;
  }
  .xuanxiang{
    height: 1rem;
  }

  .xuanxiang li{
    width: 15%;
    display: inline-block;
    font-size: 0.6rem;
    margin: 0 0.5rem;
    text-align: center;
  }
  .xuanxiang li a:hover{
    color: red;
  }
  .mianbuhuli {
    width: 100%;
    background: #fff;
    /*font-family: MicrosoftYaHei;*/
    font-size: 0.5rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.2rem;
    letter-spacing: 0.01rem;
    color: #333333;
    display: flex;
    justify-content: space-between;
    height: 3.9rem;
    box-shadow: 0rem 0.05rem 0rem 0rem #cccccc;
    margin: 0.4rem 0rem;
  }

  .mianbuhuli .le {
    flex: 11;
    text-align: center;
  }

  .mianbuhuli .le img {
    /*width: 1.6rem;*/
    height: 3rem;
  }

  .mianbuhuli .ri {
    flex: 25;
  }

  .mianbuhuli .ri>span {
    display: inline-block;
    font-size: 0.6rem;
    height: 1.4rem;
    line-height: 1.4rem;
  }

  .mianbuhuli .ri p {
    font-family: SimHei;
    font-size: 0.5rem;
    line-height: 0.8rem;
    letter-spacing: 0rem;
    color: #4d4d4d;
  }

  .mianbuhuli .ri div {
    position: relative;
  }

  .mianbuhuli .ri div span {
    font-size: 0.5rem;
  }

  .mianbuhuli .ri div p {
    position: absolute;
    right: 0.5rem;
    top: 0.04rem;
    color: #e53e42;
  }

  .mianbuhuli .ri div img:first-child {
    width: 0.6rem;
    height: 0.4rem;
  }

  .mianbuhuli .ri div .plain {
    width: 0.6rem;
    height: 0.6rem;
  }

  .bot{
    text-align: center;
  }
  .bot img{
    width: 100%;
    height: 5rem;
    font-size: 0;
  }
  .bot a{
    font-size: 0.5rem;
    margin: 0;
  }
</style>
